<template>
  <div class="main-container">
    <div class="my-row">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          :label="$t('demo.list.date')"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          :label="$t('demo.list.name')"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          :label="$t('demo.list.address')">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {list} from '@/api/demo/index'

  export default {
    name: "Index",
    mounted() {
      list().then(data => {
        this.tableData = data;
      })
    },
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

<style scoped>
  .main-container {
    display: flex;
    justify-content: space-around;
    height: 100%;
  }

  .my-row {
    flex: 1;
    margin: 10px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #dddddd;
    overflow: auto;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

</style>
